<template>
  <div
      class="page-container"
      style="height:auto;"
  >
      <div
          class="in-container"
          style="height:auto;"
      >
          <el-tabs
              v-model='tabActive'
              @tab-click='tabClick'
              type='card'
              style="margin-bottom: 8px;"
          >
              <el-tab-pane
                  name='inAccountsReconciled'
                  label='应收已对账'
              ></el-tab-pane>
              <el-tab-pane
                  name='outAccountsReconciled'
                  label='应付已对账'
              ></el-tab-pane>
          </el-tabs>

          <AccountsReconciled
              :DocType="1"
              v-if="tabActive == 'inAccountsReconciled'"
          ></AccountsReconciled>
 
          <AccountsReconciled
              :DocType="0"
              v-if="tabActive == 'outAccountsReconciled'"
          ></AccountsReconciled>
      </div>
  </div>
</template>

<script setup>
import AccountsReconciled from "./components/AccountsReconciled.vue";
import { defineComponent, ref } from 'vue';

const tabActive = ref('inAccountsReconciled');

</script>

<style lang='scss' scoped>
:deep(.in-container .el-tabs--card>.el-tabs__header) {
  border-bottom: 1px solid var(--el-border-color-light) !important;
}
</style>
